<template>
<div>
    <el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>用户管理</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          
          <el-menu-item index="1-1" @click="toupdate">更新</el-menu-item>
          <el-menu-item index="1-2" @click="toadd">增加</el-menu-item>
           <el-menu-item index="1-3" @click="tofalse">错误页面</el-menu-item>
           <el-menu-item index="1-3"  @click="totest">测试页面</el-menu-item>
           <el-menu-item index="1-3"  @click="torequest">测试接口调用</el-menu-item>

        </el-menu-item-group>

        
      
      </el-submenu>

       <el-submenu index="2">
        <template slot="title"><i class="el-icon-message"></i>导航二</template>
        <el-menu-item-group>
          <!-- <template slot="title">分组一</template> -->
          
          <el-menu-item index="1-1" @click="toupdate">更新</el-menu-item>
          <el-menu-item index="1-2" @click="toadd">增加</el-menu-item>
           <el-menu-item index="1-3" @click="tofalse">错误页面</el-menu-item>
           <el-menu-item index="1-3"  @click="totest">测试页面</el-menu-item>

        </el-menu-item-group>

        
      
      </el-submenu>
      
    </el-menu>
  </el-aside>
  
  <el-container>
     <el-header style="text-align: right; font-size: 12px" class="header">

<div class="search">


<el-input class="input" v-model="name" placeholder="姓名"></el-input>
<el-input class="input" v-model="sex" placeholder="性别"></el-input>
<el-input class="input" v-model="age" placeholder="年龄"></el-input>
<el-date-picker class="date"
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right">
    </el-date-picker>

</div>
<div>
  <el-dropdown  @command="handleCommand">
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人中心</el-dropdown-item>
          <el-dropdown-item>商城</el-dropdown-item>
          <el-dropdown-item command="exit">退出登录</el-dropdown-item>
          
        </el-dropdown-menu>
      </el-dropdown>
</div>

    
      <span>朱大地</span>
    </el-header>
   
    <el-main>
      <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="id"
      prop="id">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      label="年龄"
      prop="age">
    </el-table-column>
    <el-table-column
      label="邮箱"
      prop="email">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <div class="block">
    <!-- <span class="demonstration">完整功能</span> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size= pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total= total
      >
    </el-pagination>
  </div>


    </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）
//例如： import <<组件名称>> from '<<组件路径>>' ;

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    return {
      tableData: {
        id:0,
        name:'',
        age:0,
        email:''

      },
      search: "",
      isClick: true,
      currentPage: 1,
      pagesize: 10,
      total: 0,
      activeIndex: '1',
      activeIndex2: '1',
      name:'',
      age:0,
      sex:'',
      value2:'',
      pickerOptions:'',

    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    toupdate(id, name) {
      console.log(id, name);
    },
    del(id) {
      alert("删除此用户");
      console.log("用户ID" + id);
      //发送ajax请求
      this.axios
        .delete("http://localhost:8088/user/delete?id=" + id)
        .then(res => {
          console.log(res);
        })
        .catch(response => {
          // 跳转到错误页面
          this.$router.push("/fal");
        });

      //代替router-link实现路由跳转
      this.$router.go(0);
    },
    toadd() {
      // 跳转到增加页面
      this.$router.push("/Home/addUser");
    },
    tofalse() {
      this.$router.push("/fal");
    },
    totest() {
      this.$router.push("/test");
    },
        torequest() {
      this.$router.push("/torequest");
    },
    handleEdit(index, row) {
      console.log(index, row);
      // 跳转到更新页面
      this.$router.push("/updateUser/" + row.id);
    },
    // 删除
    handleDelete(index, row) {
      alert("删除此用户");
      console.log("用户ID" + row.id);
      let id = row.id;
      //发送ajax请求
      this.$http.delete("user/delete",{id:id},(res)=>{
        this.getUserList();
       this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
      }).catch(response => {
          // 跳转到错误页面
          this.$router.push("/fal");
        });

      // this.axios
      //   .delete("http://localhost:8088/user/delete?id=" + id)
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(response => {
      //     // 跳转到错误页面
      //     this.$router.push("/fal");
      //   });

      //代替router-link实现路由跳转
      this.$router.go(0);
      console.log(index, row.id);
    },

     handleSizeChange(size) {
        console.log(`每页 ${size} 条`);
        this.pagesize=size
        console.log(this.pagesize+"999");
        this.getUserList();
      },
      handleCurrentChange(currentPage) {
        console.log(`当前页: ${currentPage}`);
        this.currentPage=currentPage;
        console.log(currentPage+"666");
        this.getUserList();
      },
      getUserList(){
 // 发送ajax请求获取用户列表
      // this.pullStar()
    let params = {
        pagesize: this.pagesize,
        currentPage: this.currentPage,

      }
      this.$http.get("user/list",params,(response)=>{
         console.log('获取用户列表响应结果：'+response);
      this.tableData = response.data.data.list;
      this.total = response.data.data.total;
      console.log('总条数：'+this.total)
      })
    // this.axios({
    //   method: 'post',
    //   url: "http://localhost:9000/user/list",
    //   params: {
    //     pagesize: this.pagesize,
    //     currentPage: this.currentPage,

    //   }
    // }).then(response => {
    //   console.log('获取用户列表响应结果：'+response);
    //   this.tableData = response.data.data.list;
    //   this.total = response.data.data.total;
    //   console.log('总条数：'+this.total)
    // });
      },
      toexit(){
        alert("确定要退出吗？")
      },
      handleCommand(command) {
        
        if(command==="exit"){
          let user = null;
          this.$store.commit('updateUser', user);

          alert("清空登录用户，此时用户名:"+this.$store.getters.getUser)
          // 跳转到登录页面
          this.$router.push("/Login");
        }
        // this.$message('click on item ' + command);
      },
  },
  //生命周期 -创建完成 （可以访问当前this 实例）
  created() {},
  //生命周期-挂载完成（可以访问DOM 元素）
  mounted() {

    this.getUserList();
    
    
  },
  beforeCreate() {}, //生命周期 -创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 -更新之后
  beforeDestroy() {}, //声明周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive 缓存功能 这个函数会触发
};

  
</script>
<style scoped>
/*@import url();引入公共css类*/
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
#ul li {
  list-style: none;
  float: left;
  margin-left: 20px;
}
.input{
  width: 150px;
  
}
.search{
  margin-left: -20px;
  margin-right: 450px;
  width: 870px;
  background-color: antiquewhite;
  float: inherit;
}
.header{
  float: left;
}
</style>